<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尚优选PC端项目</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!--最外层的包裹元素-->
    <div id="wrapper">
        <!--头部开始-->
        <header id="header">
            <!--头部上半部-->
            <div class="headTop">
                <!--头部上半部版心-->
                <div class="headTopMain">
                    <!--左边-->
                    <div class="left">
                        <h5>欢迎来到尚优选！ 请</h5>
                        <p>
                            <a href="javascript:;">登录</a>
                            <a href="javascript:;">注册</a>
                        </p>
                    </div>
                    <!--右边-->
                    <div class="right">
                        <nav>
                            <a href="##">我的订单</a>
                            <a href="##">我的购物车</a>
                            <a href="##">我的尚优选</a>
                            <a href="##">尚优选会员</a>
                            <a href="##">企业采购</a>
                            <a href="##">关注尚优选</a>
                            <a href="##">合作招商</a>
                            <a href="##">商家后台</a>
                        </nav>
                    </div>
                </div>
            </div>
            <!--头部下半部-->
            <div class="headBottom">
                <!--头部下半部版心-->
                <div class="headBottomMain">
                    <!--logo-->
                    <h1 class="logo">
                        <a href="javascript:;">
                            <img src="images/Logo.png" alt="">
                        </a>
                    </h1>
                    <!--搜索框-->
                    <div class="search">
                        <!-- input 中的提示文本信息-->
                        <input type="text" placeholder="请输入搜索内容">
                        <input type="button" value="搜索">
                    </div>
                </div>
            </div>
        </header>
        <!--头部结束-->
        <!--分类导航开始-->
        <div id="navWrap">
            <!--版心元素-->
            <div class="navWrapMain">
                <a href="javascript:;">全部商品分类</a>
                <a href="javascript:;">服装城</a>
                <a href="javascript:;">美妆馆</a>
                <a href="javascript:;">尚优选超市</a>
                <a href="javascript:;">全球购</a>
                <a href="javascript:;">闪购</a>
                <a href="javascript:;">团购</a>
                <a href="javascript:;">有趣</a>
                <a href="javascript:;">秒杀</a>
            </div>
        </div>
        <!--分类导航结束-->
        <!--内容区域开始-->
        <div id="content">
            <!--版心元素-->
            <div class="contentMain">
                <!--路径导航开始-->
                <div id="navPath"></div>
                <!--路径导航结束-->
                <!--中间区域开始-->
                <div id="center">
                    <!--左侧放大镜开始-->
                    <div id="left">
                        <!--上边-->
                        <div id="leftTop">
                            <!--小图框-->
                            <div id="smallPic">
                                <!--小图片-->
                                <img src="images/s1.png" alt="">
                                <!--蒙版元素-->
                            </div>
                            <!--大图框-->
                        </div>
                        <!--下边-->
                        <div id="leftBottom">
                            <a href="javascript:;">
                                < </a>
                                    <div id="piclist">
                                        <ul></ul>
                                    </div>
                                    <a href="javascript:;"> > </a>
                        </div>
                    </div>
                    <!--左侧放大镜结束-->

                    <!--右侧商品详情区域开始-->
                    <div id="right">
                        <!--商品详情介绍开始-->
                        <div class="rightTop"></div>
                        <!--商品详情介绍结束-->
                        <!--商品参数的结构布局开始-->
                        <div class="rightBottom">
                             <!--选择之后结果的区域开始-->
                             <div class="choose"></div>
                             <!--选择之后结果的区域结束-->

                             <!--商品参数的选择区域开始-->
                             <div class="chooseWrap"></div>
                             <!--商品参数的选择区域结束-->

                             <!--加入购物车以及数量区域开始-->
                             <div class="addCart">
                                  <div class="count">
                                       <input type="text">
                                       <a href="javascript:;">+</a>
                                       <a href="javascript:;">-</a>
                                  </div>
                                  <button>加入购物车</button>
                             </div>
                             <!--加入购物车以及数量区域结束-->
                        </div>
                        <!--商品参数的结构布局结束-->
                    </div>
                    <!--右侧商品详情区域结束-->
                </div>
                <!--中间区域结束-->
                <!--商品详情中间部分开始-->
                <div class="goodsDetailWrap">
                    <!--左边的侧边栏-->
                    <aside class="leftAside">
                         <!--上边-->
                         <div class="asideTop">
                              <h4 class="active">相关分类</h4>
                              <h4>推荐品牌</h4>
                         </div>
                         <!--下边-->
                         <div class="aslideContent">
                             <div class="active">
                                 <ul class="goodslist1">
                                    <li>手机</li>
                                    <li>手机壳</li>
                                    <li>内存卡</li>
                                    <li>iphone配件</li>
                                    <li>贴膜</li>
                                    <li>手机耳机</li>
                                    <li>移动电源</li>
                                    <li>平板电脑</li>
                                 </ul>
                                 <ul class="goodslist2">
                                    <li>
                                        <img src="images/part01.png" alt="">
                                        <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button">
                                            <a href="javascript:;">加入购物车</a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/part01.png" alt="">
                                        <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button">
                                            <a href="javascript:;">加入购物车</a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/part01.png" alt="">
                                        <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button">
                                            <a href="javascript:;">加入购物车</a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/part01.png" alt="">
                                        <span>Apple苹果iPhone 6s (A1699)</span>
                                        <p>¥6088.00</p>
                                        <div class="button">
                                            <a href="javascript:;">加入购物车</a>
                                        </div>
                                    </li>
                                 </ul>
                             </div>
                             <div>推荐品牌内容</div>
                         </div>
                    </aside>
                    <!--右边的结构-->
                    <div class="rightDetail">
                        <!--选择搭配开始-->
                        <div class="chooseBox">
                             <!--标题-->
                             <h4>选择搭配</h4>
                             <!--内容-->
                             <div class="listWrap">
                                 <!--左边-->
                                 <div class="left">
                                     <img src="images/l-m01.png" alt="">
                                     <p>¥5299</p>
                                     <i>+</i>
                                 </div>
                                 <!--中间-->
                                 <ul class="middle">
                                    <li>
                                        <img src="images/dp01.png" alt="">
                                        <span>Feless费勒斯VR</span>
                                        <div>
                                            <input type="checkbox" value="50">
                                            <span>50</span>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/dp02.png" alt="">
                                        <span>Feless费勒斯VR</span>
                                        <div>
                                            <input type="checkbox" value="50">
                                            <span>50</span>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/dp03.png" alt="">
                                        <span>Feless费勒斯VR</span>
                                        <div>
                                            <input type="checkbox" value="50">
                                            <span>50</span>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/dp04.png" alt="">
                                        <span>Feless费勒斯VR</span>
                                        <div>
                                            <input type="checkbox" value="50">
                                            <span>50</span>
                                        </div>
                                    </li>
                                 </ul>
                                 <!--右侧-->
                                 <div class="right">
                                    <div>已购0件商品</div>
                                    <p>套餐价</p>
                                    <i>¥5299</i>
                                    <div>
                                        <button>加入购物车</button>
                                    </div>
                                 </div>
                             </div>
                        </div>
                        <!--选择搭配结束-->

                        <!--选项卡开始-->
                        <div class="BottomDetail">
                            <!--菜单-->
                            <ul class="tabBtns">
                                <li class="active"><a href="javascript:;">商品介绍</a></li>
                                <li><a href="javascript:;">规格包装</a></li>
                                <li><a href="javascript:;">售后与保障</a></li>
                                <li><a href="javascript:;">商品评价</a></li>
                                <li><a href="javascript:;">手机社区</a></li>
                            </ul>
                            <!--内容-->
                            <div class="tabContents">
                                <div class="active">
                                    <ul>
                                        <li>分辨率：1920*1080(FHD)</li>
                                        <li>后置摄像头：1200万像素</li>
                                        <li>前置摄像头：500万像素</li>
                                        <li>核 数：其他</li>
                                        <li>频 率：以官网信息为准</li>
                                        <li>品牌： Apple</li>
                                        <li>商品名称：APPLEiPhone 6s Plus</li>
                                        <li>商品编号：1861098</li>
                                        <li>商品产地：中国大陆</li>
                                        <li>商品毛重：0.51kg</li>
                                        <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                        <li>系统：苹果（IOS）</li>
                                        <li>像素：1000-1600万品毛重：0.51kg</li>
                                        <li>机身内存：64GB</li>
                                    </ul>
                                    <img src="images/intro01.png" alt="">
                                    <img src="images/intro02.png" alt="">
                                    <img src="images/intro03.png" alt="">
                                </div>
                                <div>规格包装</div>
                                <div>售后与保障</div>
                                <div>商品评价</div>
                                <div>手机社区</div>
                            </div>
                        </div>
                        <!--选项卡结束-->

                    </div>
                </div>
                <!--商品详情中间部分结束-->
            </div>
        </div>
        <!--内容区域结束-->
        <!--右侧侧边栏开始-->
        <div class="rightAside asideClose">
            <!--按钮区域-->
            <div class="btns btnsClose"></div>
            <!--侧边栏内容区域-->
            <div class="content"></div>
            <!--侧边导航-->
            <ul class="navlist">
                <li>
                    <!--小图标-->
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <!--小图标-->
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <!--小图标-->
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <!--小图标-->
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <!--小图标-->
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <!--小图标-->
                    <p></p>
                    <i>尚选会员</i>
                </li>
            </ul>
        </div>
        <!--右侧侧边栏结束-->
    </div>
    <script src="js/data.js"></script>
    <script src="js/index.js"></script>
</body>

</html>